<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/list.css">
</head>
<body>
<!-- 头部导航 -->
<div class="nav-container">
    <div class="nav">
        <div class="nav-left">
            <a href="#">
                <span>上海市</span>
                <i class="iconfont icon-ico_arrowdown"></i>
            </a>
        </div>
        <ul class="nav_right">
            <li>
                <span id="login_mark">
                    <a href="./login.html">
                        请登录
                        <i class="iconfont icon-ico_arrowdown"></i>
                    </a>
                    <!-- <b>/</b>              -->
                </span>
                <div class="hiden">
                    <img src="imgs/hearder1.jpg" alt="">
                    <a href="#">
                        <span>欢迎回来[请登录]</span>
                        <ul>
                            <li><a href="">我的收藏</a></li>
                        
                            <li><a href="">零钱</a></li>
                        
                            <li><a href="">我的唯品币</a></li>
                        </ul>
                        <ul>
                            <li><a href="">我的订单</a></li>
                        
                            <li><a href="">我的优惠券</a></li>
                       
                            <li><a href="">唯品金融</a></li>
                        </ul>
                    </a>

                </div>
                
            </li>
            <li>
                <span id="register_mark">
                    <a href="#">
                        注册
                        <i></i>
                    </a>
                    <!-- <b>/</b> -->
                </span> 
                <div class="hiden"></div>       
            </li>
            <li>
                <span>
                    <img src="imgs/nav_img1.gif" alt="">
                    <a href="#">
                        签到有礼
                        <i></i>
                    </a>
                    <!-- <b>/</b> -->
                </span>
                <div class="hiden">
                    <h2>请前往<i>唯品会APP首页</i>签到哦</h2>
                    <p>即日起，签到网页端入口将下线，请前往“唯品会APP首页-签到领券”继续参与签到活动。</p>
                    <img src="imgs/header2.png" alt="">
                    <div>
                        <img src="imgs/hearder3.png" alt="">
                        <span>也可以用微信扫码签到哦</span>
                    </div>
                </div>   
            </li>
            <li>
                <span>
                    <a href="#">
                        我的订单
                        <i></i>
                    </a>
                    <!-- <b>/</b> -->
                </span>  
                <div class="hiden"></div>                 
            </li>
            <li>
                <span>
                    <a href="#">
                        我的特卖
                        <i class="iconfont icon-ico_arrowdown"></i>
                    </a>
                    <!-- <b>/</b> -->
                </span>
                <div class="hiden">
                    <ul>
                        <li><a href="">商品收藏</a></li>
                        <li><a href="">品牌收藏</a></li>
                        <li><a href="">我的足迹</a></li>
                    </ul>
                </div>                   
            </li>
            <li>
                <span>
                    <a href="#">
                        会员俱乐部
                        <i class="iconfont icon-ico_arrowdown"></i>
                    </a>
                    <!-- <b>/</b>             -->
                </span>
                <div class="hiden">
                    <ul>
                        <li><a href="">俱乐部首页</a></li>
                        <li><a href="">唯品币兑换</a></li>
                    </ul>
            </li>
            <li>
                <span>
                    <a href="#">
                        客户服务
                        <i class="iconfont icon-ico_arrowdown"></i>
                    </a>
                    <!-- <b>/</b>    -->
                </span>
                <div class="hiden">
                    <ul>
                        <li><a href="">联系客服</a></li>
                        <li><a href="">帮助中心</a></li>
                        <li><a href="">服务中心</a></li>
                        <li><a href="">知识产权投诉</a></li>
                    </ul>
                </div>    
            </li>
            <li>
                <span>
                    <i class="iconfont icon-shouji"></i>
                    <a href="#">手机版<i></i></a>
                    <!-- <b>/</b>                    -->

                </span>
                <div class="hiden"></div>
            </li>
            <li>
                <span>
                    <a href="#">
                        更多
                        <i class="iconfont icon-ico_arrowdown"></i>
                    </a>
                </span>
                <div class="hiden">
                    <h5>合作专区</h5>
                    <p><a href="">唯品卡</a></p>
                    <h5>关于我们</h5>
                    <ul>
                        <li><a href="">Sell on vip</a></li>
                        <li><a href="">品牌招商</a></li>
                        <li><a href="">官方博客</a></li>
                    </ul>
                
            </li>
        </ul>
    </div>
</div>
<!-- 搜索框 -->
<div class="search-container">
    <div class="search-inner">
        <img src="imgs/search_img1.gif" alt="" class="logo">
        <div class="search-left">
            <a href="">
                <img src="imgs/search_img2.gif" alt="">
                <span>100%正品</span>
            </a>
            <a href="">
                <img src="imgs/search_img3.gif" alt="">
                <span>88元包邮</span>
            </a>
            <a href="">
                <img src="imgs/search_img4.gif" alt="">
                <span>退换无忧</span>
            </a>
        </div>
        <div class="search-box">
            <input type="text" placeholder="  SKII">
            <a class="search-button">
                <span class="iconfont icon-search"></span>
            </a>
            <ul class="search-mes">
                <li><a href="">女士t恤</a></li>
                <li><a href="">女士休闲裤</a></li>
                <li><a href="">手机</a></li>
                <li><a href="">护肤套装</a></li>
                <li><a href="">女休闲鞋</a></li>
            </ul>
        </div>
        <div class="shopping-bags">
            <a href="./cart.html">
                <span class="iconfont icon-gouwudai" ></span>
                <span >购物车</span>
                <span class="span-r">0</span>
            </a>
        </div>
       
            <ul class="search-bottom">
                <li class="sepcial"><a href="#">商品分类</a></li>
                <li><a href="#">推荐</a></li>
                <li><a href="#">3折疯抢</a></li>
                <li><a href="#">唯品快抢</a></li>
                <li><a href="#">唯品奥莱</a></li>
                <li><a href="#">品牌清仓</a></li>
                <li><a href="#">女装</a></li>
                <li><a href="#">鞋包</a></li>
                <li><a href="#">运动</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">男婴</a></li>
                <li><a href="#">女婴</a></li>
                <li>
                    <a href="#">
                    更多
                    <span class="iconfont icon-jiantouxia"></span>
                    </a>
                </li>
            </ul>
    </div>
</div>

<!-- 搜索结果 -->
<div class="search_result">
    <div class="result_inner">
        <ul>
            <li>
                <a href="#">全部结果</a>
                <span>></span>
            </li>

            <li>SK-II</li>
        </ul>

    </div>
</div>
<!-- 商品信息筛选部分 -->
<div class="filter-groups">
    <div class="filter-inner">
        <div class="first-list">
            <h2>唯品服务</h2>
            <ul>
                <li><a href="">仅看有货</a></li>
                <li><a href="">唯品自营</a></li>
                <li><a href="">新货</a></li>
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="second-list">
            <h2>品牌</h2>
            <div>
                <img src="imgs/fittle1.png" alt="">
            </div>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="third-list">
            <h2>品类</h2>
            <ul>
                <li><a href="">面部护理</a></li>
                <li><a href="">眼部护理</a></li>
                <li><a href="">男士护肤</a></li>
                <li><a href="">卸妆</a></li>

            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="fourth-list">
            <h2>护肤功效</h2>
            <ul>
                <li><a href="">美白亮肤</a></li>
                <li><a href="">提拉紧致</a></li>
                <li><a href="">保湿</a></li>
                <li><a href="">补水</a></li>
                <li><a href="">平衡油脂</a></li>
                <li><a href="">舒缓肌肤</a></li>
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="fifth-list">
            <h2>适用肤质</h2>
            <ul>
                <li><a href="">油性肌肤</a></li>
                <li><a href="">干性肌肤</a></li>
                <li><a href="">中性肌肤</a></li>
                <li><a href="">混合性肌肤</a></li>
                <li><a href="">敏感性肌肤</a></li>
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="sixth-list">
            <h2>适用人群</h2>
            <ul>
                <li><a href="">男士</a></li>
                <li><a href="">女士</a></li>
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="seventh-list">
            <h2>套装明细品类</h2>
            <ul>
                <li><a href="">洁面</a></li>
                <li><a href="">面膜</a></li>
                <li><a href="">眼部精华/眼霜</a></li>
                <li><a href="">精华</a></li>
                <li><a href="">面霜</a></li>
                <li><a href="">爽肤水</a></li>
    
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="eighth-list">
            <h2>使用年龄段</h2>
            <ul>
                <li><a href="">女士</a></li>
                <li><a href="">男士</a></li>
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
        <div class="ninth-list">
            <h2>套件数</h2>
            <ul>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <li><a href="">6</a></li>
                <li><a href="">其他</a></li>
    
            </ul>
            <span class="button">
                <i>+</i>
                <b>多选</b>
            </span>
        </div>
    </div>
    
</div>
<div class="pack-up">
    <div class="pack-inner">
        <div class="button">
            <a href="##">
                <span>更多选项</span>
                <i class="iconfont icon-jiantouxia"></i>
            </a>
        </div>
    </div>
</div>

<!-- 商品排序部分 -->
<div class="sort">
    <div class="sort-inner">
        <li>
            <a href="#">
                <span>综合</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>价格</span>
                <i class="iconfont icon-paixu"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <span>折扣</span>
                <i class="iconfont icon-paixu"></i>
            </a>
        </li>
        <li>
            <a href="#">
                <span>销量</span>
            </a>
        </li>
        <li>
            <span>￥</span>-
            <span>￥</span>

        </li>
    </div>

</div>

<!-- 商品列表部分 -->
<div class="mes-list">
    <div class="mes-inner" >
        <!-- <div class="mes" >
            <a href="#">
                <img src="imgs/mes-list1.jpg" alt="">
                <h4>￥690</h4>
                <p>【年度爆款】神仙水经典体验护肤套装精华液爽肤水乳面霜眼霜洁面</p>
                <span>爆款</span>
            </a>
            
        </div>
        <div class="mes" >
            <a href="#">
                <img src="imgs/mes-list1.jpg" alt="">
                <h4>￥690</h4>
                <p>【年度爆款】神仙水经典体验护肤套装精华液爽肤水乳面霜眼霜洁面</p>
                <span>爆款</span>
            </a>
            
        </div>
        <div class="mes" >
            <a href="#">
                <img src="imgs/mes-list1.jpg" alt="">
                <h4>￥690</h4>
                <p>【年度爆款】神仙水经典体验护肤套装精华液爽肤水乳面霜眼霜洁面</p>
                <span>爆款</span>
            </a>
            
        </div>
        <div class="mes" >
            <a href="#">
                <img src="imgs/mes-list1.jpg" alt="">
                <h4>￥690</h4>
                <p>【年度爆款】神仙水经典体验护肤套装精华液爽肤水乳面霜眼霜洁面</p>
                <span>爆款</span>
            </a>
            
        </div> -->
    </div>
    
    
    
    

</div>





</body>
<script src="js/ajax.js"></script>
<script src="js/list.js"></script>

<!-- <script src="libs/require.js" data-main="./js/listmain.js"></script> -->

</html>